<template>
  <div class="careers-container">
    <div class="content-wrapper">
      <div class="left-menu">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <span>人才理念</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span>社会招聘</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span>校园招聘</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="right-content">
        <div id="content-1" class="content-section" v-show="activeIndex === '1' || subPage === 0">
          <h2>人才理念</h2>
          <!-- 内容区域 -->
          <p>这里是人才理念的内容大局打开基本都能看见 加大河南省点击爱上饭卡购房款 复合肥  后回复哈是否哈桑回答说大会是否哈德反抗军大师傅骄傲是否发回答说发货发电设备vkj有kgif
            dajdhnaj kja的jkDB LjKlkflnjLkflsf了...</p>
        </div>
        <div id="content-2" class="content-section" v-show="activeIndex === '2' || subPage === 1">
          <h2>社会招聘</h2>
          <!-- 内容区域 -->
          <p>这里是社会招聘的内容...</p>
        </div>
        <div id="content-3" class="content-section" v-show="activeIndex === '3' || subPage === 2">
          <h2>校园招聘</h2>
          <!-- 内容区域 -->
          <p>这里是校园招聘的内容...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const subPage = ref(null);
const activeIndex = ref('1');

// 处理菜单选择
const handleSelect = (index) => {
  activeIndex.value = index;
  // 触发自定义事件，通知面包屑组件更新
  window.dispatchEvent(new CustomEvent('setSubMenuIndex', { 
    detail: { 
      path: '/careers',
      index: Number(index) - 1
    } 
  }));
};

// 根据URL参数更新子页面
const updateSubPage = () => {
  if (route.query.sub !== undefined) {
    const subIndex = Number(route.query.sub);
    subPage.value = subIndex;
    // 同步更新左侧菜单选中项
    activeIndex.value = (subIndex + 1).toString();
  } else {
    subPage.value = null;
  }
};

// 监听路由变化
watch(() => route.query.sub, updateSubPage);

// 监听子菜单选择事件
const handleSubMenuSelect = (event) => {
  if (event.detail && event.detail.path === '/careers') {
    const index = event.detail.index;
    subPage.value = index;
    activeIndex.value = (index + 1).toString();
  }
};

// 页面加载时初始化
onMounted(() => {
  updateSubPage();
  // 监听子菜单选择事件
  window.addEventListener('setSubMenuIndex', handleSubMenuSelect);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('setSubMenuIndex', handleSubMenuSelect);
});
</script>

<style scoped>
.careers-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.content-wrapper {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.left-menu {
  width: 200px;
  flex-shrink: 0;
}

.right-content {
  flex: 1;
  width: 500px;
}

.content-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item.is-active) {
  background-color: #ecf5ff;
  color: #409EFF;
}
</style> 